<template>
    <div class="teamplate-current">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="">开始日期：</label>
                        <input type="text" class="form-control start-date" id="j_startDate">
                    </div>
                    <div class="form-group">
                        <label class="">结束日期：</label>
                        <input type="text" class="form-control end-date" id="j_endDate">
                    </div>
                    <div class="form-group">
                        <label class="">会员卡号：</label>
                        <input type="text" class="form-control" v-model="card">
                    </div>
                    <div class="form-group">
                        <label class="">会员姓名：</label>
                        <input type="text" class="form-control" v-model="name">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-default" @click="onInquiry">查询</button>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                    <div class="list-h item-hd" >
                        <div class="btn-group">
                            <button class="btn" @click="onTab(1)">会员卡销售分析</button>
                            <button class="btn" @click="onTab(2)">积分兑换</button>
                        </div>
                    </div>
                    <div class="item-bd">
                        <div class="item" v-show="item==1">
                            <div class="table-wrap">
                                <div class="table-box" style="min-height:300px">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th class="tl">日期</th>
                                                <th class="tl">商品编号</th>
                                                <th class="tl">商品名称</th>
                                                <th class="tl">商品规格</th>
                                                <th class="tl">包装单位</th>
                                                <th class="tl">产地</th>
                                                <th class="tr">数量</th>
                                                <th class="tr">零售价(元)</th>
                                                <th class="tr">金额</th>
                                                <th class="tl">批号</th>
                                                <th class="tl">收款员</th>
                                                <th class="tl">购买时间</th>
                                                <th class="tl">会员姓名</th>
                                                <th class="tl">联系电话</th>
                                                <th class="tr">累计消费</th>
                                                <th class="tr">积分</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(item,index) in lists.list1.data">
                                                <td>{{item.rq}}</td>
                                                <td>{{item.spbh}}</td>
                                                <td>{{item.spmch}}</td>
                                                <td>{{item.shpgg}}</td>
                                                <td>{{item.dw}}</td>
                                                <td>{{item.shpchd}}</td>
                                                <td class="tr">{{item.shl |nums}}</td>
                                                <td class="tr">{{item.lshj| nums}}</td>
                                                <td class="tr">{{item.je|nums}}</td>
                                                <td>{{item.pihao}}</td>
                                                <td>{{item.shky}}</td>
                                                <td>{{item.ontime}}</td>
                                                <td>{{item.kkhname}}</td>
                                                <td>{{item.mobileno}}</td>
                                                <td class="tr">{{item.ljxfe|nums}}</td>
                                                <td class="tr">{{item.jifen|nums}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="pager-box clearfix">
                                    <div class="pull-left">共计
                                        <span class="blue">{{lists.list1.count}}</span>条信息 
                                    </div>
                                </div>
                            </div>
                            <div class="table-wrap">
                                <div class="table-box">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th class="tl">优惠卡编号</th>
                                                <th class="tl">持卡人姓名</th>
                                                <th class="tl">手机</th>
                                                <th class="tl">发卡日期</th>
                                                <th class="tl">出生日期</th>
                                                <th class="tr">累积消费</th>
                                                <th class="tr">积分</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(item,index) in lists.list2.data">
                                                <td>{{item.kkhcode}}</td>
                                                <td>{{item.kkhname}}</td>
                                                <td>{{item.callnum}}</td>
                                                <td>{{item.sxrq}}</td>
                                                <td>{{item.crsq}}</td>
                                                <td class="tr">{{item.ljxfe|nums}}</td>
                                                <td class="tr">{{item.jifen|nums}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="item" v-show="item==2">
                            <div class="table-wrap">
                                    <div class="table-box">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th class="tl">优惠卡内码</th>
                                                    <th class="tl">日期</th>
                                                    <th class="tl">单据编号</th>
                                                    <th class="tl">部门名称</th>
                                                    <th class="tl">业务员</th>
                                                    <th class="tl">优惠卡编号</th>
                                                    <th class="tl">持卡人姓名</th>
                                                    <th class="tl">发卡日期</th>
                                                    <th class="tl">身份证号</th>
                                                    <th class="tl">有效期至</th>
                                                    <th class="tl">地址电话</th>
                                                    <th class="tr">积分</th>
                                                    <th class="tr">已兑积分</th>
                                                    <th class="tl">备注说明</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="(item,index) in lists.list3.data">
                                                    <td>{{item.cardid}}</td>
                                                    <td>{{item.rq}}</td>
                                                    <td>{{item.djbh}}</td>
                                                    <td>{{item.bm}}</td>
                                                    <td>{{item.ywy}}</td>
                                                    <td>{{item.kkhcode}}</td>
                                                    <td>{{item.kkhname}}</td>
                                                    <td>{{item.fkrq}}</td>
                                                    <td>{{item.idcard}}</td>
                                                    <td>{{item.sxrq}}</td>
                                                    <td>{{item.dzdh}}</td>
                                                    <td class="tr">{{item.jifen|nums}}</td>
                                                    <td class="tr">{{item.ydjifen|nums}}</td>
                                                    <td>{{item.bzz}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                item: 1,
                lists: {
                    list1: {
                        data: [],
                        sum: {},
                        count: ''
                    },
                    list2: {
                        data: [],
                        sum: {},
                        count: ''
                    },
                    list3: {
                        data: [],
                        sum: {},
                        count: ''
                    }
                },
                card: '',
                name: '',
                fdbs: ''
            }
        },
        filters: {
            nums: info => {
                return info.toFixed(2);
            }
        },
        methods: {
            onTab(num) {
                //表格切换
                let me = this;
                me.item = num;
                me.onInquiry();
            },
            onInquiry(e) {
                let me = this;
                if (me.item == 1) {
                    let res1 = {
                        fdbs: me.fdbs,
                        startDate: $('#j_startDate').val(),
                        endDate: $('#j_endDate').val(),
                        kkhcode: me.card,
                        kkhname: me.name,
                        page: 1,
                        rows: 10
                    }
                    let res2 = {
                        kkhcode: me.card,
                        callnum: '',
                        kkhname: me.name,
                        zjm: '',
                        page: 1,
                        rows: 10
                    }
                    me.service.selectHYXFQK(me, res1, data => {
                        me.lists.list1.data = data.data.lists;
                        me.lists.list1.count = data.data.count;
                    });
                    me.service.selectOneHuiyuan(me, res2, data => {
                        me.lists.list2.data = data.data.list;
                    });
                }
                if (me.item == 2) {
                    let res3 = {
                        fdbs: me.fdbs,
                        kkhcode: me.card,
                        page: 1,
                        rows: 10
                    }
                    me.service.selectHuiYuiJiFenDuiHuanList(me, res3, data => {
                        me.lists.list3.data = data.data.lists;
                    });
                }
            }
        },
        mounted() {
            let me = this;
            me.fdbs = localStorage.getItem("fdbs");

            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                })
                return;
            }
            $(".start-date,.end-date").datetimepicker({
                language: "zh-CN",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: "yyyy-mm-dd"
            });
            let time = new Date();
            let startTimes = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + '01'; //默认开始日期
            let endTimes = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + me.util.string.numFix(time.getDate()); //默认结束日期
            $('#j_startDate').val(startTimes);
            $('#j_endDate').val(endTimes);

            me.onInquiry();
        },
    }
</script>